<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <button>搜索</button>

  <div>
    <ul>
      <li>aaa</li>
      <li>aaa</li>
      <li>aaa</li>
    </ul>
  </div>

  <script src="./jquery-3.6.0.js"></script>
  <script>
    // 语法一
    // $('选择器').事件名(事件处理函数);
    // $('button').click(function () {
    //   alert(123);
    // });

    // 语法二：
    // $('选择器').on('事件名', 事件处理函数);
    // $('button').on('click', function () {
    //   alert(456)
    // })

    // 语法三：事件委托 （如果元素是动态添加的，要为这样的元素添加事件，必须使用事件委托）
    // $('父元素').on('事件名', '子元素选择器', '事件处理函数');
    $('ul').on('click', 'li', function () {
      alert(789)
    })

  </script>

</body>

</html>